<template>
  <div class="v-deposit">

    <div class="bank-box">
      <div class="icon"><img src="./bank.png" class="bank" onclick="return false"/></div>
      <div class="bank-info">
        <div class="bank-name" v-model="bankName">{{bankName}}</div>
        <div class="bank-num">尾号<span v-model="bankNumber">{{bankNumber}}</span><span
          v-model="cardType">{{cardType}}</span></div>
      </div>
    </div>
    <div class="balance-box">
      <div class="title">提现金额</div>
      <div class="money-box"><span :class="{'icon':money}">￥</span>
        <input type="text" class="money" placeholder="提现金额最低20元" v-model="money" v-on:input="checkMoney"
               @blur="inputBlur"
               oninput="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
        <div class="del-icon" v-if="showIcon" @click="clearMoney"><img src="./delete.png" class="delete"
                                                                       onclick="return false"/></div>
      </div>
    </div>
    <div class="withdraw-btn">
      <div class="balance" v-if="showBalance">可提现金额：<span v-model="balance">{{balance}}</span>元</div>
      <div class="balance out" v-if="outBalance">金额超出可提余额</div>
      <div class="btn">
        <button type="button" class="total" @click="totalMoney">全部提现</button>
      </div>
    </div>
    <div class="deposit-box" v-show="hideBtn">
      <button type="button" class="deposit" @click="deposit">确定</button>
    </div>

    <div class="tx_bck" v-if="showKey">
      <div class="popup_box">
        <div class="popup_top" @click="closeModal"><img src="./close.png" class="close" onclick="return false"></div>
        <div class="pop_ubox">
          <div class="pop_f">请输入提现密码</div>
          <div class="pop_moy">金额<span class="icon2">{{money}}</span>元将提现至尾号为{{bankNumber}}{{bankName}}，请注意查收</div>
        </div>
        <div class="pop_mpb">
          <div class="p_mlist" v-for="i in items" :class="password[i]?'mmdd':''"></div>
        </div>
        <div class="pop_moy" @click="forgetPwd">忘记密码？</div>
      </div>
      <div class="numb_box">
        <div class="xiaq_tb">
          <img src="./pull.jpg" class="pull" onclick="return false">
        </div>
        <ul class="nub_ggg">
          <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
            <a href="javascript:void(0);">{{ val }}</a>
          </li>
          <li v-else @click="clearPwdHandle">
            <a href="javascript:void(0);">清空</a>
          </li>
          <li @click="delHandle">
            <a href="javascript:void(0);">删除</a>
          </li>
        </ul>
      </div>
    </div>
    <v-dialog v-model="sendVal" :content="content" cancelText="忘记密码" confirmText="重新输入" @confirm="retry"
              @cancel="forgetPwd"></v-dialog>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>
  </div>
</template>

<script>
  import {toDecimal} from '../../common/js/util'
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from '../../components/dialog/dialog'
  import {baseUrl, salt} from "../../common/js/env"

  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0]

  export default {
    data() {
      return {
        money: "",
        showIcon: false,
        bankName: "",
        bankNumber: "",
        cardType: "",
        balance: "",
        showBalance: true,
        outBalance: false,
        showKey: false,
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
        sendVal: false,
        modalVal: false,
        content: "",
        modal: "",
        userSign: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    created() {
      this.bankName = sessionStorage.getItem("with_bankname"); //开户行名称
      this.bankNumber = sessionStorage.getItem("with_banknumber"); //尾号
      this.cardType = sessionStorage.getItem("with_cardtype"); //卡类型
      //获取个人资料
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.axios.get(baseUrl + "/userMaterial/select?sgin=" + this.userSign).then((res) => {
        let resultObj = res.data;
        if (resultObj.code == 0 && resultObj.data != null) {
          this.balance = toDecimal(resultObj.data.money);
        } else {
          this.$vux.toast.text(resultObj.msg, "middle");
          return;
        }
      });
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      checkMoney() {//检验金额
        let num = this.money.trim();
        if (eval(num) > eval(this.balance)) {
          this.showBalance = false;
          this.outBalance = true;
          this.showIcon = true;
        } else {
          this.showBalance = true;
          this.outBalance = false;
          this.showIcon = false;
        }
      },
      clearMoney() {//清除
        this.money = "";
        this.showBalance = true;
        this.outBalance = false;
        this.showIcon = false;
      },
      totalMoney() {//全部提现
        this.money = this.balance;
      },
      deposit() {//确定
        let money = this.money.trim();
        let balance = this.balance;
        let reg = /^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
        if (money == "" || money == null) {
          this.$vux.toast.text("请输入提现金额", "middle");
          return;
        } else if (money == 0 || !reg.test(money)) {
          this.$vux.toast.text("请输入正确的金额", "middle");
          return;
        } else if (eval(money) > eval(balance)) {
          this.$vux.toast.text("金额超出可提余额", "middle");
          return;
        } else if (eval(money) < 20.00) {
          this.$vux.toast.text("提现金额最低20.00元", "middle");
          return;
        } else {
          this.money = toDecimal(this.money);
          this.showKey = true;
        }
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText
        let len = this.password.length
        if (!text || len >= 6) return
        this.password.push(text)
        this.withDraw();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      closeModal() {//关闭密码键盘
        this.showKey = false;
        this.password = [];
      },
      withDraw() {//提现密码校验
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          //判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "密码输入错误次数过多，请10分钟后再试";
            return;
          } else {//提现
            this.$vux.loading.show({
              text: '加载中',
            })
            let data = {"bankName": this.bankName, "bankNum": this.bankNumber, "money": this.money};
            this.axios.post(baseUrl + "/billrecord/withdraw_deposit?sgin=" + this.userSign + "&drawPwd=" + md5(md5(withPwd) + salt), data).then((res) => {
              let resultObj = res.data;
              this.$vux.loading.hide();
              this.showKey = false;
              this.password = [];
              if (resultObj.code == 0) {
                if (resultObj.data == 1) {
                  this.$router.push('/deposit_suc');
                } else {
                  this.$vux.toast.text("提现申请失败，请稍后重试", "middle");
                  return;
                }
              } else if (resultObj.code == 20027) {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "密码输入错误3次，请10分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试,还剩" + parseInt(3 - sess_time) + "次机会";
                }
              } else {
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            }).catch(() => {
              this.$vux.loading.hide();
              this.$vux.toast.text("网络异常", "middle");
            });
          }
        }
        return false
      },
      retry() {//重试
        this.sendVal = false;
        this.showKey = true;
      },
      forgetPwd() {//忘记密码
        this.$router.push("/authcode");
      },
      sure() {//跳转个人中心
        this.modalVal = false;
        this.showKey = false;
        this.$router.push("/salary");
      },
      inputBlur() {
        window.scrollTo(0, 0)
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .v-deposit
    wh(100%, 100%)
    background: #F2F2F2
    overflow: hidden
    .bank-box
      display: flex
      justify-content: flex-start
      margin-bottom: 0.267rem
      wh(100%, 1.76rem)
      background: #FFF
      .icon
        display: flex
        align-items: center
        margin-left: 0.307rem
        margin-right: 0.467rem
        .bank
          wh(1.28rem, 1.28rem)
      .bank-info
        display: flex
        flex-direction: column
        justify-content: center
        flex: 1
        height: 100%
        .bank-name
          padding-bottom: 0.1rem
          font-size: 0.44rem
          color: rgba(27, 27, 27, 1)
        .bank-num
          padding-top: 0.1rem
          font-size: 0.387rem
          color: rgba(147, 147, 147, 1)
    .balance-box
      wh(100%, 2.44rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 1px solid rgba(238, 238, 238, 1)
      .title
        padding-top: 0.48rem
        padding-left: 0.333rem
        size-color(0.387rem, rgba(102, 102, 102, 1))
      .money-box
        display: flex
        justify-content: flex-start
        align-items: center
        margin-top: 0.6rem
        margin-left: 0.3rem
        height: 0.667rem
        size-color(0.64rem, rgba(27, 27, 27, 1))
        .icon
          color: $color
        .money
          width: 80%
          display: flex
          align-items: center
          line-height: 0.667rem
          color: $color
          font-weight: 500
        .del-icon
          margin-left: auto
          margin-right: 0.347rem
          .delete
            wh(0.627rem, 0.627rem)
    .withdraw-btn
      display: flex
      align-items: center
      wh(100%, 1.067rem)
      background: #FFF
      .balance
        margin-left: 0.373rem
        size-color(0.44rem, rgba(153, 153, 153, 1))
      .out
        color: rgba(255, 102, 102, 1)
      .btn
        margin-left: auto
        margin-right: 0.373rem
        font-size: 0.44rem
        .total
          color: rgba(60, 175, 255, 1)
          outline: none
          background: #FFF
    .deposit-box
      position: absolute
      bottom: 0.48rem
      width: 100%
      height: 1.333rem
      text-align: center
      .deposit
        width: 92.53%
        height: 1.333rem
        border-radius: 0.133rem
        font-size: 0.44rem
        color: rgba(255, 255, 255, 1)
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1);
    .tx_bck
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      background-color: rgba(0, 0, 0, 0.5)
      .popup_box
        margin: 0 auto
        margin-top: 10.54%
        wh(92.53%, auto)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .popup_top
          display: flex
          padding-top: 0.293rem
          padding-right: 0.293rem
          margin-left: auto
          wh(0.48rem, 0.48rem)
          .close
            wh(100%, 100%)
        .pop_ubox
          margin-bottom: 0.2rem
          wh(100%, auto)
          color: rgba(27, 27, 27, 1)
          .pop_f
            display: flex
            justify-content: center
            margin-bottom: 0.32rem
            font-weight: 500
            size-color(0.48rem, rgba(51, 51, 51, 1))
          .pop_moy
            margin: 0 auto
            wh(6.467rem, auto)
            line-height: 0.48rem
            size-color(0.4rem, rgba(153, 153, 153, 1))
          .icon2
            color: $color
        .pop_mpb
          margin: 0 auto
          wh(90%, 1.333rem)
          border: 1px solid rgba(224, 224, 224, 1)
          .p_mlist
            float: left
            wh(16.35%, 100%)
            border-right: 1px solid rgba(224, 224, 224, 1)
            &:last-child
              border-right: 0rem
          .mmdd
            display: inline-block
            background: #FFF url(./dark.jpg) center no-repeat
            background-size: 25%
        .pop_moy
          padding-top: 0.4rem
          padding-bottom: 0.4rem
          text-align: center
          size-color(0.44rem, $color)
      .numb_box
        position: fixed
        bottom: 0
        wh(100%, auto)
        background: #f5f5f5
        .xiaq_tb
          display: table
          text-align: center
          margin: 0 auto
          padding: 0.067rem 0rem
          border-top: 1px solid #dadada
          .pull
            width: 0.533333rem
            height: 0.333333rem
            margin-top: 0.183333rem
        .nub_ggg
          border: 1px solid #dadada
          border-bottom: none
          border-left: none
          border-right: none
          width: 100%
          margin-top: 0.133333rem
          overflow: hidden
          li
            width: 33.3333%
            border-bottom: 1px solid #dadada
            float: left
            text-align: center
            font-size: 0.426666rem
            a
              display: block
              color: #000
              height: 1.2rem
              line-height: 1.2rem
              overflow: hidden
              &:active
                background: #e0e0e0
              &:nth-child(1)
                border-right: 1px solid #dadada
</style>
